/*
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-03-22 12:12:49
 * @LastEditTime: 2023-06-29 16:55:54
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: vue.config.js 配置文件
 * @FilePath: \vue3-element-plus-web\vue.config.js
 * @Copyright 版权声明
 */

const path = require('path')
const webpack = require('webpack')

// gzip 压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin')

// 是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'

// // 打包优化： 解决缓存问题方案 二
// const timeStamp = new Date().getTime()

function resolve(dir) {
  return path.join(__dirname, '.', dir)
}

module.exports = {
  // 基本路径
  publicPath: './', // 静态资源路径（默认/，如果不改打包后会白屏）
  // 输入文件目录
  assetsDir: './static', // outputDir的静态资源(js、css、img、fonts)目录
  outputDir: process.env.outputDir, // 输出文件目录
  // lintOnSave: !isProduction, // 设置是否在开发环境下每次保存代码时都启用 eslint验证
  productionSourceMap: !isProduction, // 生产环境去掉map文件
  // productionSourceMap: !isProduction, // 生产环境去掉map文件
  filenameHashing: true, // 生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存
  chainWebpack: (config) => {
    config.module.rules.delete('svg') //重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/icons')) //处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
    config.plugin('html').tap((args) => {
      args[0].title = '平台管理'
      return args
    })
  },
  configureWebpack: {
    // 别名配置
    resolve: {
      alias: {
        vue: path.resolve('./node_modules/vue'),
      },
    },
    // 插件配置
    plugins: [
      //支持jquery
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery',
      }),
      // gzip 压缩
      new CompressionWebpackPlugin({
        test: /\.js$|\.css$|\.html$|\.png$|\jpg$|\gif/, //匹配文件名
        threshold: 10240, //对超过10K的数据进行压缩
        deleteOriginalAssets: false, //是否删除原文件
      }),
    ],
    // 关闭性能提示
    performance: {
      hints: false,
    },
    // 打包优化： 解决缓存问题方案 一
    optimization: {
      minimize: !(process.env.NODE_ENV === 'development'),
      splitChunks: {
        cacheGroups: {
          vendor: {
            chunks: 'all',
            test: /node_modules/,
            name: 'vendor',
            minChunks: 1,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 100,
          },
          common: {
            chunks: 'all',
            test: /[\\/]src[\\/]js[\\/]/,
            name: 'common',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 60,
          },
          styles: {
            name: 'styles',
            test: /\.(sa|sc|c)ss$/,
            chunks: 'all',
            enforce: true,
          },
          runtimeChunk: {
            name: 'manifest',
          },
        },
      },
    },
    // // 打包优化： 解决缓存问题方案 二
    // output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
    //   filename: `js/js[name].${timeStamp}.js`,
    //   chunkFilename: `js/chunk.[id].${timeStamp}.js`,
    // }
  },
  // // 打包优化： 解决缓存问题方案 二
  // css: { //重点.
  //   extract: { // 打包后css文件名称添加时间戳
  //     filename: `css/[name].${timeStamp}.css`,
  //     chunkFilename: `css/chunk.[id].${timeStamp}.css`,
  //   }
  // },
  devServer: {
    // host: '127.0.0.1',
    port: 9000,
    open: true,
  },
}
